<div fxLayout="column" fxFill class="fullscreen color-lightblack">
    <header class="app-header noshrink header-dark">
        <span id="addprinter-back-btn" class="i-arrow-back margin-l header-icon" (click)="goBack()"></span>
        <span fxFlex="100%" class="margin-l-xs">IP网络打印机</span>
    </header>
    <div fxLayout="column" *ngIf="!isLoading && !searchFailed">
        <div fxLayout="column" fxFlex="50%" class="padding">
            <md-input-container class="pct100 v-gap-s text-s">
                <input mdInput placeholder="输入设备的网络地址（IP）" [(ngModel)]="printerIP">
            </md-input-container>
            <div class="text-s color-lightgray">请根据厂商的使用说明书，将网络打印机接入到网络中，并保证当前终端可以访问。</div>
        </div>
        <div class="padding" fxFlex="50%">
            <button class="pct100 bgcolor-primary content-btn color-white" md-button (click)="searchPrinter()">查找打印机</button>
        </div>
    </div>

    <div fxLayout="column" *ngIf="isLoading">
        <div fxFlex="50%" fxLayoutAlign="center center">
            <div class="spin-scale"></div>
        </div>
        <div fxLayout="column" fxFlex="50%" class="padding" fxLayoutAlign="start center">
            <div class="text-s">查找中，请稍后</div>
        </div>
    </div>

    <div fxLayout="column" *ngIf="!isLoading && searchFailed">
        <div fxLayout="column" fxFlex="50%" class="padding">
            <div fxLayout="row" fxLayoutAlign="center center">
                <span class="i-error color-warn text-icon-m"></span>
            </div>
            
            <span class="text-s v-gap">没有查找到打印机，请按下述步骤检查</span>
            <span class="text-s v-gap">1、打印机电源是否开启。</span>
            <span class="text-s">2、保证打印机连接的WiFi和设备连接的WiFi在同一网段。</span>
        </div>
        <div class="padding" fxFlex="50%">
            <button class="pct100 bgcolor-primary content-btn color-white" md-button (click)="searchAgain()">重新查找</button>
        </div>
    </div>

</div>